<template>
  <div>
    <div class="shopp_box">
      <div class="shopp_head">
        <div class="head_left">
          <h3>
            先鉴别后发货 保障全新正品<span
              class="iconfont icon-jiantou-right-copy"
            ></span>
          </h3>
          <p>多重鉴别<span>|</span>逐件检查<span>|</span>正品保障</p>
        </div>
        <div class="head_right" @click="$router.push('/my')">
          <span class="iconfont icon-zhangyu"></span>
          <!-- <span class="fen">我的</span> -->
        </div>
      </div>
      <div class="search">
        <div class="search_box" @click="$router.push('/search')">
          <div class="search_left">
            <span class="iconfont icon-fangdajing"></span>
            <span class="search_recommend">安踏卫衣</span>
          </div>
          <div class="search_right">
            <span class="iconfont icon-xiangji"></span>
          </div>
        </div>
      </div>
      <div class="classification">
        <van-tabs v-model="active">
          <van-tab title="推茬">
            <classificationindex :goodsLists="goodslists"></classificationindex>
          </van-tab>
          <van-tab title="鞋类">
            <classification :goodsLists="goodslists"></classification>
          </van-tab>
          <!-- <van-tab title="配饰">
            <classification></classification>
          </van-tab>
          <van-tab title="出行">
            <classification></classification>
          </van-tab>
          <van-tab title="女装">
            <classification></classification>
          </van-tab>
          <van-tab title="艺术">
            <classification></classification>
          </van-tab>
          <van-tab title="箱包">
            <classification></classification>
          </van-tab> -->
        </van-tabs>
      </div>

      <!-- <bottom></bottom> -->
    </div>
  </div>
</template>

<script>
// import bottom from "../components/bottom/bottom.vue";
import classificationindex from "../components/shopping/classificationindex.vue";
import classification from "../components/shopping/classification.vue";
export default {
  data: function () {
    return {
      active: "0",
      goodslists: [], //传入组件的商品列表
    };
  },
  created() {
    this.$http.get("/static/goodslists.json").then((item) => {
      let lists = item.data;
      let index = lists.findIndex((item) => {
        console.log(item.goods, this.active);
        return item.goods == this.active;
      });
      this.goodslists = lists[index].data;
    });
  },
  watch: {
    active() {
      this.$http.get("/static/goodslists.json").then((item) => {
        let lists = item.data;
        let index = lists.findIndex((item) => {
          console.log(item.goods, this.active);
          return item.goods == this.active;
        });
        this.goodslists = lists[index].data;
      });
    },
  },
  components: {
    // bottom,
    classificationindex,
    classification,
  },
};
</script>

<style lang="less">
.shopp_box {
  .shopp_head {
    padding: 10px 20px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 14px;
      span {
        padding-left: 7px;
      }
    }
    .head_left {
      p {
        width: 100%;
        font-size: 12px;
        transform: scale(0.8) translateX(-25px);
        color: #afafaf;
        span {
          padding: 0 11px;
        }
      }
      .iconfont {
        font-size: 12px;
      }
    }
    .head_right {
      font-size: 14px;
      text-align: center;
      // font-weight: bold;
      .fen {
        display: block;
        font-size: 12px;
        transform: scale(0.8) translateY(-5px);
      }
    }
  }
  .search {
    padding: 10px 20px;
    .search_box {
      padding: 10px 12px;
      background-color: #f5f4f9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .iconfont {
        font-size: 14px;
      }
      .search_recommend {
        font-size: 12px;
        color: #b7b7c3;
        padding-left: 8px;
      }
    }
  }
  .classification {
    width: 100%;
    box-sizing: border-box;
    .van-tabs__nav--complete {
      padding-right: 0px;
    }
  }
  .rotation {
    padding: 10px 20px;
    img {
      width: 100%;
      max-height: 60px;
    }
  }
}
</style>